<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>19-小米主页切换效果</title>

  <style>
    .nav-logo .logo {
      position: relative;
      top: 20px;
      left: 50%;
      margin-left: -28px;
      /*这个可以回过头来再看*/
      display: block;
      width: 55px;
      height: 55px;
      background-color: #ff6700;

      overflow: hidden;
      /*这个也很重要喔，不加会有惊喜*/
    }

    .nav-logo .logo:after,
    .nav-logo .logo:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 55px;
      width: 55px;
      content: "";
      transition: transform .3s;
      /*这个也很重要喔，加在hover里会有惊喜*/
    }

    .nav-logo .logo:after {
      background: url(images/mi-home.png) no-repeat 50% 50%;
      margin-left: -55px;
    }

    .nav-logo .logo:before {
      background: url(images/mi-logo.png) no-repeat 50% 50%;
    }

    .nav-logo .logo:hover:after,
    .nav-logo .logo:hover:before {
      /*这里面的:hover  与:before 之间不要有空格喔，不然也会有问题喔*/
      transform: translate(55px);
    }
  </style>

</head>

<body>

  <div class="nav-logo">
    <a href="" class="logo"></a>
  </div>

</body>

</html>